<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{% block title %}Flask App{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>

<body>
    <!-- Content area -->
    <div class="content-container">
        {% block content %}
        {% endblock %}
    </div>

    <!-- Flash messages container -->
    <div class="flashes-container">
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
              <p class="flashes {{ category }}">{{ message }}</p>
            {% endfor %}
          {% endif %}
        {% endwith %}
    </div>
</body>

</html>